<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Zero</title>
    <link rel="stylesheet" href="index.css">

    <script>
        window.safeCall = function (name, ...args) {
            if (window[name]) window[name](...args)
        }
    </script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script type="module" src="index.js"></script>

</head>

<body>
    <div class="container">
        <div id="left-panel" class="panel">
            <!-- <h2>Configuration</h2> -->

            <div class="config-section" id="status-section" x-data="{ connected: true }">
                <h3>Status</h3>
                <h4 class="connected" x-show="connected">&#10004; Connected</h4>
                <h4 class="disconnected" x-show="!connected">&#10008; Disconnected</h4>
            </div>

            <div class="config-section" x-data="{ showQuickActions: true }">
                <h3>Quick Actions</h3>
                <button class="config-button" id="resetChat" @click="resetChat()">Reset chat</button>
                <button class="config-button" id="newChat" @click="newChat()">New Chat</button>
            </div>

            <div class="config-section" id="chats-section" x-data="{ contexts: [], selected: '' }" x-show="contexts.length > 0">
                <h3>Chats</h3>
                <ul class="config-list">
                    <template x-for="context in contexts">
                        <li>
                            <span 
                                :class="{'chat-list-button': true, 'font-bold': context.id === selected}" 
                                @click="selected = context.id; selectChat(context.id)">
                                Chat #<span x-text="context.no"></span>
                            </span>
                            <button class="edit-button" @click="killChat(context.id)">X</button>
                        </li>
                    </template>
                </ul>
            </div>

            <div class="config-section">
                <h3>Preferences</h3>
                <ul class="config-list">
                    <li x-data="{ autoScroll: true }">
                        <span>Autoscroll</span>
                        <label class="switch">
                            <input type="checkbox" x-model="autoScroll"
                                x-effect="window.safeCall('toggleAutoScroll',autoScroll)">
                            <span class="slider"></span>
                        </label>
                    </li>

                    <li x-data="{ showThoughts: true }">
                        <span>Show thoughts</span>
                        <label class="switch">
                            <input type="checkbox" x-model="showThoughts"
                                x-effect="window.safeCall('toggleThoughts',showThoughts)">
                            <span class="slider"></span>
                        </label>
                    </li>

                    <li x-data="{ showJson: false }">
                        <span>Show JSON</span>
                        <label class="switch">
                            <input type="checkbox" x-model="showJson" x-effect="window.safeCall('toggleJson',showJson)">
                            <span class="slider"></span>
                        </label>
                    </li>

                </ul>
            </div>
        </div>
        <div class="splitter" id="splitter"></div>
        <div id="right-panel" class="panel">
            <!--<h2>Chat</h2>-->
            <div id="chat-history">

            </div>
            <div id="input-section" x-data="{ paused: false }">
                <textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
                <button class="chat-button" id="send-button">&#10148;</button>
                <button class="chat-button pause-button" id="pause-button" @click="pauseAgent(true)"
                    x-show="!paused">&#10074;&#10074;</button>
                <button class="chat-button pause-button" id="unpause-button" @click="pauseAgent(false)"
                    x-show="paused">&#9654;</button>
            </div>
        </div>
    </div>
</body>

</html>